<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:insert="common :: common">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords"
          content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>主页</title>

</head>

<body class="sticky-header">

<section>

    <div th:replace="common::#left-menu"></div>

    <!-- main content start-->
    <div class="main-content">

        <div th:replace="common::#header"></div>

        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            用户信息

                        </header>
                        <div class="panel-body" style="display: block;">
                            <table id="items_table" class="table  table-hover general-table">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>昵称</th>
                                    <th>电话</th>
                                    <th>居住地</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                            <div class="row-fluid" id="page_footer">
                                <div id="pageInfo">

                                </div>
                                <div class="col-md-6 col-md-offset-7" id="pagination">

                                </div>
                            </div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
        <div th:replace="common :: #footer"></div>
    </div>

    <!-- main content end-->
</section>


<div th:replace="common::#footer_js"></div>
<script th:replace="common::#init"></script>
<script th:replace="common :: #function"></script>
<script th:replace="common::#usersNav"></script>
<script>
    function to_page(pn) {
        $.ajax({
            url: "/ajaxUsers",
            data: {
                pageNo: pn
            },
            success: function (result) {
                buildTable(result);
                buildPageInfo(result);
                bulidPagination(result);
            }
        });
    }

    function reset(uid) {
        $.ajax({
            url:"/ajaxResetPwd",
            data:{
                uid:uid
            },
            success:function (result) {
                alert(result.message);
            }
        })

    }


    function buildTable(result) {
        $("#items_table tbody").empty();
        var users = result.data.pageInfo.list;
        //$.each循环 第一个参数为 循环的列表 然后 第二个参数为对这些数据循环操作即方法（index，item）
        $.each(users, function (index, item) {
            var uidTd = $("<td></td>").append(item.uid);
            var nameTd = $("<td></td>").append(item.name);
            var telephoneTd = $("<td></td>").append(item.telephone);
            var addressTd = $("<td></td>").append(item.address);
            // var resetBtn = $("");
            // var setEnabledBtn = $("<button>重置密码</button>").addClass("btn btn-success btn-sm").attr("type","button");
            var resetBtn = $("<button>重置密码</button>").addClass("btn btn-success btn-sm").attr("type","button");
            resetBtn.click(function () {
                if(confirm("您确定要重置用户【"+item.name+"】的密码吗？")){
                    reset(item.uid);
                }else{
                    return false;
                }
            });
            var operationTd = $("<td></td>").append(resetBtn);
            $("<tr></tr>")
                .append(uidTd)
                .append(nameTd)
                .append(telephoneTd)
                .append(addressTd)
                .append(operationTd)
                .appendTo("#items_table tbody");
        });
    }
</script>
</body>
</html>